window.addEventListener('load', function() {


    /* 需求：1.点击申请数据弹出蒙层 */
    let playData = document.querySelectorAll('.play-data')
    let mask = document.querySelector('#mask')

    // playData.forEach(function(dom, i) {
    //     // console.log(dom);
    //     playData[i].addEventListener('click', function() {
    //         // block是属性值要加''
    //         mask.style.display = 'block'
    //     })
    // })

    /* 需求：2.点击蒙层,隐藏蒙层 */
    let frame = document.querySelector('#frame')
        // mask.addEventListener('click', function() {
        //         mask.style.display = 'none'
        //     })
        // 蒙层子节点的设置阻止冒泡的事件
        // frame.addEventListener('click', function(event) {
        //     // stopPropagation()阻止冒泡、阻止传播
        //     event.stopPropagation()
        // })

    /* 需求3.如果用户和密码框长度大于1就显示关闭图片,小于就隐藏 */
    let userImg = document.querySelector('.user-name img')
    let userInput = document.querySelector('.user-name input')

    let pwdImg = document.querySelector('.user-pwd img')
    let pwdInput = document.querySelector('.user-pwd input')
        // console.log(userImg);
        // console.log(pwdImg);
        // console.log(userInput);
        // console.log(pwdInput);

    userInput.addEventListener('input', function() {
        // trim()清除value的空格后的长度大于0时
        if (userInput.value.trim().length > 0) {
            userImg.style.display = 'block'
        } else {
            userImg.style.display = 'none'
        }
    })

    pwdInput.addEventListener('input', function() {
        // trim()清除value的空格后的长度大于0时
        if (pwdInput.value.trim().length > 0) {
            pwdImg.style.display = 'block'
        } else {
            pwdImg.style.display = 'none'
        }
    })

    /* 需求4.点击关闭图片，input框内容清空,并隐藏自己 */
    userImg.addEventListener('click', function() {
        userImg.style.display = 'none'
        userInput.value = ''
    })

    pwdImg.addEventListener('click', function() {
        pwdImg.style.display = 'none'
        pwdInput.value = ''
    })

    /**
     * 定义正则表达式
     */
    // 手机号
    let userReg = /^(13[0-9]|14[01456879]|15[0-3,5-9]|16[2567]|17[0-8]|18[0-9]|19[0-3,5-9])\d{8}$/
        // 六个整数
    let pwdReg = /^\d{6}$/

    /* 需求5.不符合正则表达式的就提示 */
    let userTips = document.querySelector('.userTips')
    let pwdTips = document.querySelector('.pwdTips')
    userInput.addEventListener('blur', function() {
        bool = userReg.test(userInput.value)
        if (bool) {
            userTips.textContent = ''
        } else {
            userTips.textContent = '手机号格式错误'
        }
    })
    pwdInput.addEventListener('blur', function() {
        bool = pwdReg.test(pwdInput.value)
        if (bool) {
            pwdTips.textContent = ''
        } else {
            pwdTips.textContent = '密码格式错误'
        }
    })

    /* 需求6.如果用户密码都符号正则,点击登陆按钮跳转 */
    let loginBtn = document.querySelector('.login-btn')

    loginBtn.addEventListener('click', function() {
        if (!userReg.test(userInput.value)) {
            userTips.textContent = '手机号格式错误'
        } else if (!pwdReg.test(pwdInput.value)) {
            pwdTips.textContent = '密码格式错误'
        } else {
            location.href = './home.html'
        }
    })

    /* 需求7.点击扫码登陆切换界面 */
    let topItem = document.querySelector('.top-item')
    let topItem2 = document.querySelector('.top-item2')
    let conItem = document.querySelector('.con-item')
    let wechatCode = document.querySelector('.wechat-code')
        // console.log(topItem);
        // console.log(conItem);
        // console.log(wechatCode);
        // let index = 0
        // topItem.forEach(function(dom, i) {
        //         dom.addEventListener('click', function() {
        //             topItem[index].classList.remove('tab-active')
        //             dom.classList.add('tab-active')

    //             index = i

    //         })
    //     })

    // topItem2.addEventListener('click', function() {
    //     topItem.classList.remove('tab-active')
    //     topItem2.classList.add('tab-active')
    //     conItem.style.display = 'none'
    //     wechatCode.style.display = 'block'
    // })
    // topItem.addEventListener('click', function() {
    //     topItem.classList.add('tab-active')
    //     topItem2.classList.remove('tab-active')
    //     conItem.style.display = 'block'
    //     wechatCode.style.display = 'none'
    // })


    // 模拟服务器上的传递过来的数据
    let apiTypeData = [
        { name: "全部", keyword: "身份证实名", isnew: false },
        { name: "生活服务", keyword: "银行卡", isnew: false },
        { name: "金融科技", keyword: "短信", isnew: false },
        { name: "交通地理", keyword: "天气", isnew: false },
        { name: "充值缴费", keyword: "短信", isnew: false },
        { name: "数据智能", keyword: "手机归属地", isnew: false },
        { name: "企业工商", keyword: "IP", isnew: false },
        { name: "应用开发", keyword: "手机归属地", isnew: false },
        { name: "电子商务", keyword: "IP", isnew: false },
        { name: "吃喝玩乐", keyword: "视频", isnew: false },
        { name: "文娱视频", keyword: "视频", isnew: false },
        { name: "免费接口大全", keyword: "短信", isnew: true },
        { name: "短信", keyword: "身份证实名", isnew: false },
        { name: "汽车", keyword: "银行卡", isnew: false },
        { name: "核验", keyword: "银行卡", isnew: false },
        { name: "最新发布", keyword: "银行卡", isnew: true },
        { name: "API私有化部署", keyword: "身份证实名", isnew: true },
    ]

    /* 需求8.获取数据,将数据内容渲染到tag-assort里 */

    let tagAssort = document.querySelector('.tag-assort')

    // 定义数组保存变量
    assortHtml = ''

    // 遍历数组
    apiTypeData.forEach(function(v, i) {
        // 拼接数据
        assortHtml += `
        <a href="#" class="${v.isnew ? 'active' : ''}"
        data-keyword = "${v.keyword}"> ${v.name} 
        </a>
        `
    })

    tagAssort.innerHTML = assortHtml


    /* 需求9.利用事件委派给tag-assort添加监听事件
     *将当前事件源的文本渲染到desc,获取当前事件源的
     *自定义属性keyword,渲染给search的input，searchText
     *注意，事件委派中this不能代表当前事件源触发对象，慎用
     *事件委派中：事件源 -e.target
     */

    let desc = document.querySelector('.desc')
    let searchText = document.querySelector('.search input')

    tagAssort.addEventListener('click', function(e) {
        if (e.target.nodeName === 'A') {
            desc.textContent = e.target.textContent

            // 目标对象的自定义属性keyword
            searchText.placeholder = e.target.dataset.keyword
        }
    })


    /**
     * 模拟api列表数据
     */

    //API列表区域 模拟服务器返回的数据
    let listDataArr = [
        //第一行
        { img: "API_01.jpg", name: "2021出行防疫政策指南", price: "免费", isSpecial: false },
        { img: "API_02.jpg", name: "身份证实名认证", price: "￥0.2000/次", isSpecial: true },
        { img: "API_03.jpg", name: "天气预报", price: "免费", isSpecial: false },
        { img: "API_04.jpg", name: "银行卡四元素校验", price: "￥0.3360/次", isSpecial: true },
        { img: "API_05.jpg", name: "短信API服务", price: "￥0.0400/次", isSpecial: true },

        //第二行
        { img: "API_01.jpg", name: "2021出行防疫政策指南", price: "免费", isSpecial: false },
        { img: "API_02.jpg", name: "身份证实名认证", price: "￥0.2000/次", isSpecial: true },
        { img: "API_03.jpg", name: "天气预报", price: "免费", isSpecial: false },
        { img: "API_04.jpg", name: "银行卡四元素校验", price: "￥0.3360/次", isSpecial: true },
        { img: "API_05.jpg", name: "短信API服务", price: "￥0.0400/次", isSpecial: true },
        //第三行
        { img: "API_01.jpg", name: "2021出行防疫政策指南", price: "免费", isSpecial: false },
        { img: "API_02.jpg", name: "身份证实名认证", price: "￥0.2000/次", isSpecial: true },
        { img: "API_03.jpg", name: "天气预报", price: "免费", isSpecial: false },
        { img: "API_04.jpg", name: "银行卡四元素校验", price: "￥0.3360/次", isSpecial: true },
        { img: "API_05.jpg", name: "短信API服务", price: "￥0.0400/次", isSpecial: true },
        //第四行
        { img: "API_01.jpg", name: "2021出行防疫政策指南", price: "免费", isSpecial: false },
        { img: "API_02.jpg", name: "身份证实名认证", price: "￥0.2000/次", isSpecial: true },
        { img: "API_03.jpg", name: "天气预报", price: "免费", isSpecial: false },
        { img: "API_04.jpg", name: "银行卡四元素校验", price: "￥0.3360/次", isSpecial: true },
        { img: "API_05.jpg", name: "短信API服务", price: "￥0.0400/次", isSpecial: true },

    ]

    /* 需求10.遍历listDataArr,组装成HTML代码
     *并渲染到list-assort
     */
    // 获取元素
    let listAssortUl = document.querySelector('.list-assort ul')


    function renderListData() {

        // 获取元素
        let listAssortUl = document.querySelector('.list-assort ul')
            // console.log(listAssortUl);

        // 定义变量
        let listDataHtml = ''

        listDataArr.forEach(function(v, i) {

            // href="./apidetails.html"

            listDataHtml += `
    <li>
    <span class="${v.isSpecial ? 'isShow' : ''}">企业专用</span>
        <div class="center">
            <a href="./apidetails.html">
                <img src="../imgs/${v.img}" alt="">
                <p>${v.name}</p>
                <p class="${v.price === '免费' ? 'green' : 'red'}">${v.price}</p>
            </a>
        </div>
        <a class="play-data">申请数据</a>
    </li>
    `
                // console.log(listDataHtml);
        })
        listAssortUl.innerHTML = listDataHtml
    }

    renderListData()


    /* 需求11.点击play-data,显示蒙层mask */
    listAssortUl.addEventListener('click', function(e) {
        // 事件委派,筛选出事件源:按钮play-data
        //if (e.target.className === 'play-data')
        // 有多个类名时className='play-data'会清除其他类名
        // 要用contains('')是否包含某一类名
        // e.target.classList.contains('play-data')
        // 事件e的事件源,的classList类名伪数组
        // 是否包含类名'play-data'
        if (e.target.classList.contains('play-data')) {
            mask.style.display = 'block'
        }
    })


    /* 需求12.点击mask,隐藏自己 */
    mask.addEventListener('click', function() {
        mask.style.display = 'none'
    })

    /* 需求13.点击frame,阻止事件传播(事件冒泡) */
    frame.addEventListener('click', function(e) {
        e.stopPropagation()
    })


    /* 需求14.点击(tab-top li)为当前菜单添加激活样式
     *显示当前菜单对应内容(con-item div)
     */


    tabCard('.tab-top li', '.tab-content .login')

})